<template>
	<view class="myWrapper">
		<view :style="isPoster ? 'filter: blur(4rpx)' : ''">
			<view class="user">
				<image :src="personal.avatarUrl" mode="widthFix" class='userImg'></image>
				<view>
					{{personal.nickName ? personal.nickName : ''}}
				</view>
			</view>
			<view class="copyInfo" @click="copy()">
				<icon class='iconfont icon-fuzhi1'></icon>
				<view>{{personal.accont}}</view>
			</view>
			<view class="myWrapperInfo">
				<view @tap="toUrl" data-url="/pages/my/otherHalf">
					<view class='wrapperInfo1'>
						<icon class='iconfont icon-V'></icon>
						<view>另一半</view>
					</view>
					<view>
						<image :src="personal.love_avatarUrl" mode="widthFix" class="otherUser"></image>
						<icon class='iconfont icon-you'></icon>
					</view>
				</view>
				<view @tap="flaunt">
					<view class='wrapperInfo2'>
						<icon class='iconfont icon-aiqing'></icon>
						<view>秀恩爱</view>
					</view>
					<view>
						<view v-if="personal.desire_num">在一起{{personal.desire_num}}天</view>
						<icon class='iconfont icon-you'></icon>
					</view>
				</view>
				<view @tap="toUrl" data-url="/pages/my/setting">
					<view class='wrapperInfo3'>
						<icon class='iconfont icon-shezhi2'></icon>
						<view>设置</view>
					</view>
					<view>
						<icon class='iconfont icon-you'></icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 分享海报 -->
		<poster :posterInfo="personal" v-if="isPoster" @FcloseShade="flaunt"></poster>
	</view>
</template>

<script>
	import poster from '@/components/poster/poster.vue';
	export default {
		components: {
			poster
		},
		data() {
			return {
				personal:{},
				isPoster:false
			}
		},
		onShow() {
			this.infoMes();
		},
		methods: {
			/**
			 * @author smallfour
			 * @description 获取个人信息
			 */
			infoMes:function(){
				this.$api.getMes({}).then(res => {
					if(res.code == 200){
						this.personal = res.data;
					}
				})
			},
			
			/**
			 * @author smallfour
			 * @description 秀恩爱
			 */
			flaunt:function(){
				// this.msg('功能正在开发中...');
				this.isPoster = this.isPoster ? false : true;
			},
			
			/**
			 * @author smallfour
			 * @description 页面跳转
			 */
			toUrl:function(e){
				if(e.target.dataset.url == '/pages/my/otherHalf'){
					if(!this.personal.love_avatarUrl){
						this.msg('醒醒单身狗,你不配拥有');
						return false;
					}
				}
				uni.navigateTo({
					url:e.target.dataset.url
				})
			},
			
			/**
			 * @author armg999
			 * @description 复制
			 */
			copy(){
				const that = this;
				wx.setClipboardData({
				    data:String(this.personal.accont),
				    success: function (res) {
						that.msg('内容已复制');
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	.myWrapper{
		position: relative;
	}
	.user{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding:200rpx 0 50rpx;
	}
	.userImg{
		width:180rpx;
		height:auto;
		border-radius: 50%;
		margin-bottom:30rpx;
	}
	.copyInfo{
		position: absolute;
		right:0;
		top:300rpx;
		display: flex;
		align-items: center;
		background: linear-gradient(to bottom,#73ebbb,#32b0e8);
		border-radius: 50rpx 0 0 50rpx;
		font-size: 28rpx;
		color:#fff;
		padding:10rpx;
	}
	.icon-fuzhi1{
		margin-top:-10rpx;
	}
	.otherUser{
		width:60rpx;
		height:auto;
		border-radius: 50%;
	}
	.myWrapperInfo>view{
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 120rpx;
		padding:0 30rpx;
		border-top:1px solid #eee;
		font-size: 30rpx;
	}
	.myWrapperInfo>view:last-child{
		border-bottom:1px solid #eee;
	}
	.myWrapperInfo>view>view{
		display: flex;
		align-items: center;
		z-index: -1;
		icon{
			font-size: 60rpx;
			width: 80rpx;
		}
	}
	.wrapperInfo1>icon{
		color:#f4ea2a;
	}
	.wrapperInfo2>icon{
		color:#d81e06;
	}
	.wrapperInfo3>icon{
		color:#1296db;
	}
	.icon-you{
		color:#888;
	}
</style>
